<template>
  <div class="progress-tracking-container">
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/salvation">超度与救赎</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/salvation/redemption-plan">救赎计划管理</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>进度跟踪</a-breadcrumb-item>
    </a-breadcrumb>

    <div class="page-header">
      <h1 class="page-title">救赎进度跟踪</h1>
      <p class="page-subtitle">实时监控救赎任务执行进度和完成情况</p>
      <a-button type="primary" @click="handleExport">
        <template #icon><ExportOutlined /></template>
        导出报告
      </a-button>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <a-card class="stat-card">
        <div class="stat-content">
          <BarChartOutlined class="stat-icon" />
          <div class="stat-info">
            <div class="stat-value">156</div>
            <div class="stat-label">进行中任务</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card">
        <div class="stat-content">
          <CheckCircleOutlined class="stat-icon" />
          <div class="stat-info">
            <div class="stat-value">89</div>
            <div class="stat-label">今日完成</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card">
        <div class="stat-content">
          <ExclamationCircleOutlined class="stat-icon" />
          <div class="stat-info">
            <div class="stat-value">23</div>
            <div class="stat-label">超期任务</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card">
        <div class="stat-content">
          <TrophyOutlined class="stat-icon" />
          <div class="stat-info">
            <div class="stat-value">84.5%</div>
            <div class="stat-label">平均完成率</div>
          </div>
        </div>
      </a-card>
    </div>

    <!-- 筛选区域 -->
    <a-card class="filter-card">
      <a-row :gutter="16" align="middle">
        <a-col :span="6">
          <a-input-search v-model:value="searchText" placeholder="搜索参与者、任务名称" @search="handleSearch" />
        </a-col>
        <a-col :span="4">
          <a-select v-model:value="filterStatus" placeholder="进度状态" style="width: 100%" allowClear>
            <a-select-option value="not_started">未开始</a-select-option>
            <a-select-option value="in_progress">进行中</a-select-option>
            <a-select-option value="completed">已完成</a-select-option>
            <a-select-option value="overdue">超期</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-range-picker v-model:value="dateRange" placeholder="['开始日期', '结束日期']" style="width: 100%" />
        </a-col>
        <a-col :span="8">
          <a-space>
            <a-button @click="resetFilters">重置</a-button>
            <a-button type="primary" @click="applyFilters">筛选</a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-card>

    <!-- 进度列表 -->
    <a-card class="table-card">
      <a-table :columns="columns" :data-source="progressData" :pagination="pagination" row-key="id">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'participant'">
            <div class="participant-info">
              <a-avatar :src="record.avatar" :size="32">{{ record.participantName.charAt(0) }}</a-avatar>
              <div>
                <div class="name">{{ record.participantName }}</div>
                <div class="id">ID: {{ record.participantId }}</div>
              </div>
            </div>
          </template>

          <template v-else-if="column.key === 'task'">
            <div class="task-info">
              <div class="task-name">{{ record.taskName }}</div>
              <a-tag :color="getDifficultyColor(record.taskDifficulty)" size="small">
                {{ getDifficultyText(record.taskDifficulty) }}
              </a-tag>
            </div>
          </template>

          <template v-else-if="column.key === 'progress'">
            <div class="progress-info">
              <a-progress :percent="record.progressPercent" size="small" :stroke-color="getProgressColor(record.progressPercent)" />
              <div class="progress-text">{{ record.completedSteps }}/{{ record.totalSteps }} 步骤</div>
            </div>
          </template>

          <template v-else-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">{{ getStatusText(record.status) }}</a-tag>
          </template>

          <template v-else-if="column.key === 'actions'">
            <a-dropdown>
              <template #overlay>
                <a-menu @click="handleMenuClick($event, record)">
                  <a-menu-item key="view">查看详情</a-menu-item>
                  <a-menu-item key="remind" :disabled="record.status === 'completed'">发送提醒</a-menu-item>
                  <a-menu-item key="extend" :disabled="record.status === 'completed'">延期申请</a-menu-item>
                </a-menu>
              </template>
              <a-button type="text">操作 <DownOutlined /></a-button>
            </a-dropdown>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 详情查看模态框 -->
    <a-modal v-model:open="showDetailModal" title="进度详情" width="900px" :footer="null">
      <div class="progress-detail" v-if="selectedRecord">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-card class="participant-card">
              <div class="participant-info">
                <a-avatar :size="80" :src="selectedRecord.avatar" />
                <h3>{{ selectedRecord.name }}</h3>
                <a-tag :color="getLevelColor(selectedRecord.level)"> LV.{{ selectedRecord.level }} </a-tag>
                <div class="contact-info">
                  <p><MessageOutlined /> {{ selectedRecord.phoneNumber }}</p>
                  <p><SendOutlined /> {{ selectedRecord.email }}</p>
                </div>
                <div class="merit-info">
                  <span class="merit-total"
                    >功德总值: <strong>{{ selectedRecord.totalMerit }}</strong></span
                  >
                </div>
              </div>
            </a-card>
          </a-col>

          <a-col :span="16">
            <a-card class="task-progress-card">
              <h4>{{ selectedRecord.taskName }}</h4>
              <p class="task-desc">{{ selectedRecord.taskDescription }}</p>

              <div class="progress-overview">
                <a-row :gutter="16">
                  <a-col :span="8">
                    <a-statistic title="完成进度" :value="selectedRecord.progress" suffix="%" />
                  </a-col>
                  <a-col :span="8">
                    <a-statistic title="剩余天数" :value="selectedRecord.daysLeft" suffix="天" />
                  </a-col>
                  <a-col :span="8">
                    <a-statistic title="完成步骤" :value="selectedRecord.completedSteps" :suffix="`/${selectedRecord.totalSteps}`" />
                  </a-col>
                </a-row>
              </div>

              <a-divider>详细进度</a-divider>

              <a-steps direction="vertical" :current="selectedRecord.completedSteps - 1">
                <a-step v-for="step in selectedRecord.progressDetails" :key="step.step" :title="step.name" :status="step.status === 'completed' ? 'finish' : step.status === 'pending' ? 'wait' : 'error'">
                  <template #description>
                    <span v-if="step.date">完成时间: {{ step.date }}</span>
                    <span v-else class="pending-text">等待执行</span>
                  </template>
                </a-step>
              </a-steps>
            </a-card>
          </a-col>
        </a-row>

        <a-card class="additional-info" style="margin-top: 16px">
          <a-descriptions :column="3" bordered>
            <a-descriptions-item label="开始日期">{{ selectedRecord.startDate }}</a-descriptions-item>
            <a-descriptions-item label="截止日期">{{ selectedRecord.nextDeadline }}</a-descriptions-item>
            <a-descriptions-item label="分配人员">{{ selectedRecord.assignedBy }}</a-descriptions-item>
            <a-descriptions-item label="当前状态" :span="2">
              <a-tag :color="getStatusColor(selectedRecord.status)">
                {{ getStatusText(selectedRecord.status) }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="状态说明">
              {{ getStatusDescription(selectedRecord.status, selectedRecord.daysLeft) }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </div>
    </a-modal>

    <!-- 发送提醒模态框 -->
    <a-modal v-model:open="showReminderModal" title="发送提醒" width="600px" @ok="sendReminder" :confirmLoading="loading">
      <a-form layout="vertical" v-if="selectedRecord">
        <a-form-item label="接收人">
          <a-input :value="selectedRecord.name" disabled />
        </a-form-item>

        <a-form-item label="提醒方式">
          <a-radio-group v-model:value="reminderForm.type">
            <a-radio value="email">邮件通知</a-radio>
            <a-radio value="sms">短信通知</a-radio>
            <a-radio value="both">邮件+短信</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="提醒内容">
          <a-textarea v-model:value="reminderForm.content" :rows="4" placeholder="请输入提醒内容" />
        </a-form-item>

        <a-form-item label="发送时间">
          <a-radio-group v-model:value="reminderForm.scheduleTime">
            <a-radio value="">立即发送</a-radio>
            <a-radio value="1hour">1小时后</a-radio>
            <a-radio value="1day">1天后</a-radio>
            <a-radio value="custom">自定义时间</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 申请延期模态框 -->
    <a-modal v-model:open="showExtensionModal" title="申请延期" width="600px" @ok="submitExtension" :confirmLoading="loading">
      <a-form layout="vertical" v-if="selectedRecord">
        <a-form-item label="申请人">
          <a-input :value="selectedRecord.name" disabled />
        </a-form-item>

        <a-form-item label="任务名称">
          <a-input :value="selectedRecord.taskName" disabled />
        </a-form-item>

        <a-form-item label="延期原因" required>
          <a-select v-model:value="extensionForm.reason" placeholder="请选择延期原因">
            <a-select-option value="personal">个人原因</a-select-option>
            <a-select-option value="work">工作冲突</a-select-option>
            <a-select-option value="health">健康问题</a-select-option>
            <a-select-option value="emergency">紧急事件</a-select-option>
            <a-select-option value="other">其他原因</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="申请延期天数">
          <a-input-number v-model:value="extensionForm.requestDays" :min="1" :max="30" style="width: 100%" addonAfter="天" />
        </a-form-item>

        <a-form-item label="详细说明" required>
          <a-textarea v-model:value="extensionForm.explanation" :rows="4" placeholder="请详细说明延期的具体原因和情况" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ExportOutlined, BarChartOutlined, CheckCircleOutlined, ExclamationCircleOutlined, TrophyOutlined, DownOutlined, MessageOutlined, SendOutlined } from '@ant-design/icons-vue'
import { message, Modal } from 'ant-design-vue'

const searchText = ref('')
const filterStatus = ref(undefined)
const dateRange = ref([])
const loading = ref(false)

// 模态框控制
const showDetailModal = ref(false)
const showReminderModal = ref(false)
const showExtensionModal = ref(false)
const selectedRecord = ref(null)

const progressData = ref([
  {
    id: 1,
    participantId: 'RS001',
    participantName: '张三',
    name: '张三',
    avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
    taskName: '孤儿院志愿服务',
    taskDifficulty: 2,
    progressPercent: 75,
    progress: 75,
    completedSteps: 3,
    totalSteps: 4,
    status: 'in_progress',
    startTime: '2024-01-15',
    startDate: '2024-01-15',
    deadline: '2024-02-15',
    nextDeadline: '2024-02-15',
    daysLeft: 8,
    phoneNumber: '138****1234',
    email: 'zhangsan@email.com',
    level: 3,
    totalMerit: 1250,
    assignedBy: '管理员001',
    taskDescription: '在当地孤儿院进行为期一个月的志愿服务，照顾儿童日常生活',
    progressDetails: [
      { step: 1, name: '报名确认', status: 'completed', date: '2024-01-15' },
      { step: 2, name: '岗前培训', status: 'completed', date: '2024-01-18' },
      { step: 3, name: '服务执行', status: 'completed', date: '2024-01-22' },
      { step: 4, name: '总结报告', status: 'pending', date: null }
    ]
  },
  {
    id: 2,
    participantId: 'RS002',
    participantName: '李四',
    name: '李四',
    avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
    taskName: '道德经研读',
    taskDifficulty: 3,
    progressPercent: 100,
    progress: 100,
    completedSteps: 5,
    totalSteps: 5,
    status: 'completed',
    startTime: '2024-01-10',
    startDate: '2024-01-10',
    deadline: '2024-02-10',
    nextDeadline: '2024-02-10',
    daysLeft: 0,
    phoneNumber: '139****5678',
    email: 'lisi@email.com',
    level: 4,
    totalMerit: 2100,
    assignedBy: '管理员002',
    taskDescription: '深入研读道德经全文，撰写心得体会不少于5000字',
    progressDetails: [
      { step: 1, name: '获取教材', status: 'completed', date: '2024-01-10' },
      { step: 2, name: '章节研读', status: 'completed', date: '2024-01-15' },
      { step: 3, name: '笔记整理', status: 'completed', date: '2024-01-25' },
      { step: 4, name: '心得撰写', status: 'completed', date: '2024-02-05' },
      { step: 5, name: '提交审核', status: 'completed', date: '2024-02-10' }
    ]
  },
  {
    id: 3,
    participantId: 'RS003',
    participantName: '王五',
    name: '王五',
    avatar: 'https://randomuser.me/api/portraits/women/1.jpg',
    taskName: '环保清洁行动',
    taskDifficulty: 1,
    progressPercent: 40,
    progress: 40,
    completedSteps: 2,
    totalSteps: 5,
    status: 'overdue',
    startTime: '2024-01-20',
    startDate: '2024-01-20',
    deadline: '2024-01-27',
    nextDeadline: '2024-01-27',
    daysLeft: -2,
    phoneNumber: '137****9999',
    email: 'wangwu@email.com',
    level: 2,
    totalMerit: 680,
    assignedBy: '管理员001',
    taskDescription: '组织或参与社区环保清洁活动，清理垃圾，保护环境',
    progressDetails: [
      { step: 1, name: '活动报名', status: 'completed', date: '2024-01-20' },
      { step: 2, name: '参与清洁', status: 'pending', date: null },
      { step: 3, name: '提交报告', status: 'pending', date: null }
    ]
  }
])

// 表单数据
const reminderForm = ref({
  type: 'email',
  content: '',
  scheduleTime: ''
})

const extensionForm = ref({
  reason: '',
  requestDays: 7,
  explanation: ''
})

const columns = [
  { title: '参与者', key: 'participant', width: 200 },
  { title: '任务信息', key: 'task', width: 250 },
  { title: '进度', key: 'progress', width: 150 },
  { title: '状态', key: 'status', width: 100 },
  { title: '开始时间', dataIndex: 'startTime', width: 120 },
  { title: '截止时间', dataIndex: 'deadline', width: 120 },
  { title: '操作', key: 'actions', width: 120 }
]

const pagination = ref({ pageSize: 10 })

const getDifficultyColor = (difficulty) => {
  const colors = { 1: 'green', 2: 'blue', 3: 'orange', 4: 'red' }
  return colors[difficulty] || 'default'
}

const getDifficultyText = (difficulty) => {
  const texts = { 1: '简单', 2: '普通', 3: '困难', 4: '地狱' }
  return texts[difficulty] || '未知'
}

const getStatusColor = (status) => {
  const colors = {
    not_started: 'default',
    in_progress: 'processing',
    completed: 'success',
    overdue: 'error'
  }
  return colors[status] || 'default'
}

const getStatusText = (status) => {
  const texts = {
    not_started: '未开始',
    in_progress: '进行中',
    completed: '已完成',
    overdue: '超期'
  }
  return texts[status] || '未知'
}

const getProgressColor = (percent) => {
  if (percent >= 80) return '#52c41a'
  if (percent >= 60) return '#1890ff'
  if (percent >= 40) return '#faad14'
  return '#ff4d4f'
}

const handleExport = () => message.info('导出进度报告')
const handleSearch = () => message.info('搜索进度')
const applyFilters = () => message.success('筛选已应用')
const resetFilters = () => {
  searchText.value = ''
  filterStatus.value = undefined
  dateRange.value = []
  message.info('筛选条件已重置')
}

const handleMenuClick = ({ key }, record) => {
  selectedRecord.value = record

  switch (key) {
    case 'view':
      showDetailModal.value = true
      break

    case 'remind':
      reminderForm.value = {
        type: 'email',
        content: `亲爱的${record.participantName}，您的任务"${record.taskName}"还有${record.daysLeft}天到期，请及时完成。`,
        scheduleTime: ''
      }
      showReminderModal.value = true
      break

    case 'extend':
      extensionForm.value = {
        reason: '',
        requestDays: 7,
        explanation: ''
      }
      showExtensionModal.value = true
      break
  }
}

const sendReminder = async () => {
  try {
    loading.value = true
    // 模拟发送延迟
    await new Promise((resolve) => setTimeout(resolve, 1000))

    message.success(`提醒已发送给 ${selectedRecord.value.participantName}`)
    showReminderModal.value = false
  } catch (error) {
    message.error('发送失败，请重试')
  } finally {
    loading.value = false
  }
}

const submitExtension = async () => {
  try {
    loading.value = true
    // 模拟提交延迟
    await new Promise((resolve) => setTimeout(resolve, 1000))

    message.success(`延期申请已提交，等待审核`)
    showExtensionModal.value = false
  } catch (error) {
    message.error('提交失败，请重试')
  } finally {
    loading.value = false
  }
}

const getLevelColor = (level) => {
  const colors = {
    1: 'default',
    2: 'green',
    3: 'blue',
    4: 'purple',
    5: 'gold'
  }
  return colors[level] || 'default'
}

const getStatusDescription = (status, daysLeft) => {
  switch (status) {
    case 'completed':
      return '任务已成功完成'
    case 'in_progress':
      return daysLeft > 0 ? `进行中，还有 ${daysLeft} 天` : '即将到期，请尽快完成'
    case 'overdue':
      return `已逾期 ${Math.abs(daysLeft)} 天，需要申请延期或处理`
    case 'pending':
      return '任务尚未开始'
    default:
      return '状态未知'
  }
}
</script>

<style lang="scss" scoped>
.progress-tracking-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 24px;

  .breadcrumb {
    margin-bottom: 24px;
    :deep(.ant-breadcrumb-link) {
      color: rgba(255, 255, 255, 0.65);
      &:hover {
        color: #ffd700;
      }
    }
    :deep(.ant-breadcrumb-separator) {
      color: rgba(255, 255, 255, 0.45);
    }
  }

  .page-header {
    margin-bottom: 32px;

    .page-title {
      color: #ffd700;
      font-size: 28px;
      font-weight: 600;
      margin: 0 0 8px 0;
    }

    .page-subtitle {
      color: rgba(255, 255, 255, 0.65);
      margin-bottom: 16px;
    }

    :deep(.ant-btn-primary) {
      background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
      border-color: #ffd700;
      color: #1a1a2e;
    }
  }

  .stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;

      :deep(.ant-card-body) {
        padding: 24px;
      }

      .stat-content {
        display: flex;
        align-items: center;
        gap: 16px;

        .stat-icon {
          font-size: 24px;
          color: #ffd700;
        }

        .stat-info {
          .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: #ffd700;
          }
          .stat-label {
            color: rgba(255, 255, 255, 0.65);
          }
        }
      }
    }
  }

  .filter-card,
  .table-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 24px;

    :deep(.ant-card-body) {
      padding: 24px;
    }
  }

  .table-card {
    :deep(.ant-table) {
      background: transparent;
      .ant-table-thead > tr > th {
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.85);
      }
      .ant-table-tbody > tr > td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.85);
      }
    }
  }

  .participant-info {
    display: flex;
    align-items: center;
    gap: 12px;

    .name {
      color: #ffd700;
      font-weight: 500;
    }
    .id {
      color: rgba(255, 255, 255, 0.45);
      font-size: 12px;
    }
  }

  .task-info {
    .task-name {
      color: #ffd700;
      font-weight: 500;
      margin-bottom: 4px;
    }
  }

  .progress-info {
    .progress-text {
      color: rgba(255, 255, 255, 0.65);
      font-size: 12px;
      margin-top: 4px;
    }
  }

  :deep(.ant-input),
  :deep(.ant-select-selector) {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);

    &:hover,
    &:focus {
      border-color: #ffd700;
      box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
    }
  }

  :deep(.ant-select-arrow) {
    color: rgba(255, 255, 255, 0.45);
  }

  // 详情模态框样式
  .progress-detail {
    .participant-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);

      .participant-info {
        text-align: center;

        h3 {
          color: #ffd700;
          margin: 16px 0 8px;
        }

        .contact-info {
          margin: 16px 0;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.65);

          p {
            margin: 4px 0;
          }
        }

        .merit-info {
          .merit-total {
            color: #ffd700;
            font-size: 14px;

            strong {
              font-size: 16px;
            }
          }
        }
      }
    }

    .task-progress-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);

      h4 {
        color: #ffd700;
        margin-bottom: 8px;
      }

      .task-desc {
        color: rgba(255, 255, 255, 0.75);
        margin-bottom: 24px;
      }

      .progress-overview {
        margin-bottom: 24px;
      }
    }

    .additional-info {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .pending-text {
      color: rgba(255, 255, 255, 0.45);
      font-style: italic;
    }
  }

  // 模态框样式
  :deep(.ant-modal) {
    .ant-modal-content {
      background: rgba(26, 26, 46, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ant-modal-header {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-modal-title {
        color: #ffd700;
        font-weight: 600;
      }
    }

    .ant-modal-body {
      color: rgba(255, 255, 255, 0.85);
    }

    .ant-modal-footer {
      background: transparent;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  :deep(.ant-form-item-label > label) {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
  }

  :deep(.ant-input),
  :deep(.ant-input-number),
  :deep(.ant-textarea),
  :deep(.ant-select) {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);

    &:hover,
    &:focus {
      border-color: #ffd700;
      box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
    }

    &::placeholder {
      color: rgba(255, 255, 255, 0.45);
    }
  }

  :deep(.ant-descriptions) {
    .ant-descriptions-item-label {
      background: rgba(255, 255, 255, 0.05);
      color: rgba(255, 255, 255, 0.85);
      font-weight: 500;
    }

    .ant-descriptions-item-content {
      background: rgba(255, 255, 255, 0.02);
      color: rgba(255, 255, 255, 0.85);
    }
  }

  :deep(.ant-steps) {
    .ant-steps-item-title {
      color: rgba(255, 255, 255, 0.85) !important;
    }

    .ant-steps-item-description {
      color: rgba(255, 255, 255, 0.65) !important;
    }
  }
}
</style>
